<!-- 公司管理 -->
<template>
  <div class="company">
    <div class="institutions">
      <i class="iconfont">&#xe629;</i>
      <p class="tissue">公司管理</p>
      <!-- 条件查询 -->
      <div class="institutions-query">
        <el-input
          v-model="input"
          placeholder="请输入内容"
          style="width:100px; margin-right: 10px;"
          size="mini"
        ></el-input>
        <el-button type="primary" icon="el-icon-sort" size="mini">查询</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini">刷新</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini">新增</el-button>
      </div>
    </div>
    <!-- 表格数据 -->
    <el-table
      :data="tableData"
      style="width: 98%;margin-left: 1%;margin-top: 10px;"
      max-height="400"
      row-key="id"
      border
      v-loading="loading"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="name" label="机构名称" header-align="center" width="190">
        <template slot-scope="scope">
          <i class="iconfont icongongzuoneirong"></i>
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="id" align="center"></el-table-column>
      <el-table-column prop="pid" label="比例" sortable align="center"></el-table-column>
      <el-table-column prop="sort" label="排序" sortable align="center"></el-table-column>
      <el-table-column prop="status" label="状态" :formatter="stateStart" align="center"></el-table-column>
      <el-table-column prop="type" label="权限类型" :formatter="stateFormat" align="center"></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        :formatter="dateFormat"
        sortable
        align="center"
      ></el-table-column>
      <el-table-column prop="uri" label="名称" align="center"></el-table-column>
      <el-table-column prop="value" label="评价" align="center"></el-table-column>
      <el-table-column prop="operation" label="操作" align="center">
        <template slot-scope="scope">
          <div class="user-icon">
            <span class="editor">
              <i class="iconfont" title="编辑" @click="handleEdit(scope.$index, scope.row)">&#xe600;</i>
            </span>
            <span class="delete">
              <i class="iconfont" title="删除" @click="handleDelete(scope.$index, tableData)">&#xe601;</i>
            </span>
            <span class="add">
              <i class="iconfont" title="新增">&#xe638;</i>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import permission from "@/directive/permission/index.js";
export default {
  name: "element-permission",
  directives: {
    permission
  },
  components: {},
  data() {
    return {
      input: "",
      tableData: [],
      loading: true //异步加载动画
    };
  },
  props: {},
  computed: {},
  methods: {
    companyand() {
      this.$store
        .dispatch("Company")
        .then(data => {
          this.tableData = data;
          this.loading = false;
        })
        .catch(error => {
          console.log("请求失败：" + error);
        });
    },
    // 权限类型
    stateFormat(row, column) {
      switch (row.type) {
        case 0:
          return "目录";
          break;
        case 1:
          return "菜单";
          break;
        case 2:
          return "按钮";
          break;
        default:
      }
    },
    // 启用状态
    stateStart(row, column) {
      if (row.status == 0) {
        return "禁用";
      } else if (row.status == 1) {
        return "启用";
      }
    },
    //时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    }
  },
  watch: {},
  created() {
    this.companyand();
  },
  mounted() {}
};
</script>

<style scoped>
.company {
  margin-top: 20px;
}
.institutions {
  position: relative;
  height: 30px;
  display: flex;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
}
.tissue {
  font-size: 14px;
  font-weight: bold;
  margin-left: 5px;
}
.institutions-query {
  position: absolute;
  right: 20px;
  top: 10px;
}
.editor > .iconfont {
  cursor: pointer;
  color: #62c45e;
  margin-right: 10px;
}
.delete > .iconfont {
  cursor: pointer;
  color: #eb4a4a;
  margin-right: 10px;
}
.add > .iconfont {
  font-size: 20px;
  cursor: pointer;
  color: #5a9ec6;
}
</style>